<template>
  <div class="article-detail">
    <el-button 
      type="primary" 
      :icon="ArrowLeft" 
      @click="router.back()"
      class="back-btn"
      round
    >
      返回
    </el-button>

    <div class="article-container">
      <template v-if="article">
        <div class="header">
          <h1 class="title">{{ article.title }}</h1>
          <div class="meta">
            <div class="meta-item">
              <el-icon><Calendar /></el-icon>
              <span class="date">{{article.date==null ? article.date: formatDate(article.date) }}</span>
            </div>
            <div class="meta-item">
              <el-icon><View /></el-icon>
              <!-- <span>{{ article.views || 9999 }} 阅读</span> -->
            </div>
          </div>
        </div>

        <el-divider class="divider" />

        <div class="content-wrapper">
          <MarkdownRender 
            :content="article.content ? article.content : '加载中...' " 
            class="markdown-content"
          />
        </div>
      </template>

      <div v-else class="not-found">
        <el-empty description="文章不存在或已被删除" :image-size="200">
          <el-button type="primary" @click="router.push('/')">返回首页</el-button>
        </el-empty>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { Calendar, View, ArrowLeft } from '@element-plus/icons-vue';
import MarkdownRender from '@/components/MarkdownRender.vue';
import instance from '@/utils/request'; // 导入请求工具
import axios from 'axios';
const route = useRoute();
const router = useRouter();
const article = ref(null);
// 定义 formatDate 函数
function formatDate(dateStr) {
    const date = new Date(dateStr);
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    const seconds = String(date.getSeconds()).padStart(2, '0');
    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
// 根据路由参数获取文章
watch(
  () => route.params.id,
  async (newId) => {
    try {
      // 调用后端接口，根据 id 获取文章
      // const response = await axios.get('http://134.175.177.137:8080/myblog/articles/'+newId)
      const response = await axios.get('https://www.bigpigbig.cn/stage-api/myblog/articles/'+newId)
      if (response.status === 200) {
        console.log(response)
        article.value = response.data.data; // 假设后端返回的数据格式为 { code: 0, data: { ... } }
      } else {
        console.error('获取文章失败:', response.msg);
      }
    } catch (error) {
      console.error('请求失败:', error);
    }
  },
  { immediate: true }
);
</script>

<style lang="scss" scoped>
.article-detail {
  padding: 40px 0;
  min-height: 100vh;
  background: linear-gradient(145deg, #f9fafe 0%, #f1f5fe 100%);

  .back-btn {
    position: fixed;
    left: 40px;
    top: 100px;
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
    transition: all 0.3s ease;

    &:hover {
      transform: translateX(-4px);
    }
  }

  .article-container {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.05);
    padding: 40px;
    animation: fadeInUp 0.6s ease;
  }

  .header {
    text-align: center;
    margin-bottom: 40px;

    .title {
      font-size: 2.4em;
      color: #1a1a1a;
      margin: 0 0 20px;
      line-height: 1.3;
      font-weight: 700;
      letter-spacing: -0.5px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    }

    .meta {
      display: flex;
      gap: 24px;
      justify-content: center;
      color: #666;
      font-size: 0.95em;

      .meta-item {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 16px;
        background: #f5f7fa;
        border-radius: 8px;

        .el-icon {
          color: var(--el-color-primary);
        }
      }
    }
  }

  .divider {
    margin: 32px 0;
    background-color: rgba(0, 0, 0, 0.08);
  }

  .content-wrapper {
    :deep(.markdown-content) {
      h2 {
        font-size: 1.6em;
        border-left: 4px solid var(--el-color-primary);
        padding-left: 16px;
        margin: 2em 0 1.5em;
      }

      p {
        margin: 1.2em 0;
        color: #444;
        line-height: 1.8;
      }

      img {
        max-width: 100%;
        border-radius: 8px;
        margin: 1.5em 0;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }
    }
  }

  .not-found {
    padding: 80px 0;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .article-detail {
    padding: 20px;

    .back-btn {
      left: 20px;
      top: 20px;
    }

    .article-container {
      padding: 24px;
      border-radius: 12px;
    }

    .header .title {
      font-size: 1.8em;
    }

    .meta {
      flex-direction: column;
      align-items: center;
      gap: 12px;
    }
  }
}
</style>